<script>

export default {
  name: 'VipDetail',
  data () {
    return {
      show: false,
      formData: {
        userinfoId: '',
        username: '',
        nickname: '',
        phone: '',
        profile: '',
        href: '',
        avatar: ''
      },
      avatarUrl: '',
      basePath: '',
      url: ''
    }
  },
  methods: {
    init (id) {
      this.show = true
      this.formData = { ...this.$options.data().formData }
      if (id) {
        this.$axios.get(`vip/info/${id}`).then(data => {
          this.formData = { ...data }
          if (data.avatar.startsWith('http')) {
            this.avatarUrl = data.avatar
          } else {
            this.avatarUrl = this.basePath + data.avatar
          }
        })
      }
    }
  },
  created () {
    this.basePath = process.env.VUE_APP_BASE_PATH
    this.url = window.location.protocol + '//' + window.location.hostname + ':' + window.location.port
  }
}
</script>

<template>
<el-dialog title="会员信息" :visible.sync="show">
  <el-form :model="formData" label-width="80px">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="formData.username" disabled/>
    </el-form-item>
    <el-form-item label="手机号" prop="phone">
      <el-input v-model="formData.phone" disabled/>
    </el-form-item>
    <el-form-item label="昵称" prop="nickname">
      <el-input v-model="formData.nickname" disabled/>
    </el-form-item>
    <el-form-item label="个性域名">
      <el-input v-model="formData.href" disabled :placeholder="formData.username">
        <template slot="prepend">{{url}}</template>
      </el-input>
    </el-form-item>
    <el-form-item label="个人简介">
      <el-input v-model="formData.profile" disabled type="textarea"/>
    </el-form-item>
    <el-form-item label="头像">
      <el-upload
        disabled
        class="avatar-uploader"
        :show-file-list="false">
        <img v-if="avatarUrl" :src="avatarUrl" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </el-form-item>
  </el-form>
</el-dialog>
</template>

<style scoped lang="scss">

</style>
